<template>
  <div class="wrapper">
    <div :class="{ item: true, special: count < 3 }" v-for="item in count" :key="item">
      {{ item }}
    </div>
  </div>
  <button @click="change">改变</button>
  <B />
  {{ C }}
  <div>组件B{{ B }}</div>
</template>

<script setup lang="tsx">
import { ref } from 'vue'

const count = ref(3)

const change = () => {
  count.value = count.value === 3 ? 2 : 3
}

const B = () => <h1 onClick={change}>{count.value}</h1>
const C = <h1 onClick={change}>{count.value}</h1>
</script>

<style lang="less">
.wrapper {
  display: flex;
  flex-wrap: wrap;
  background-color: black;
  .item {
    height: 20px;
    margin-left: 20px;
    background-color: aliceblue;
    flex: 1 1 48%;
    &.special {
      flex: 1 1 100%;
    }
  }
}
</style>
